<template>
<!-- fys 7.4 -->
	<div class="ScenicRegion">
		<!-- 景点地区-搜索框及我的主页按钮 -->
    <el-row id="scenic_sousuo_row">
      <el-col :span="14" style="margin-left:200px;height:100px">
      <el-input style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);border-radius: 8px;" id="sousuo" v-model="input" placeholder="请输入内容"></el-input>
      </el-col>
      <el-col :span="2" :pull="1">
        <el-button style="width:132px;height:56px;" type="primary">搜索</el-button>
      </el-col>
      <el-col :span="2" :pull="1">
        <router-link to="/MyHomePage"><el-button style="width:124px;height:56px;">我的主页</el-button></router-link>
      </el-col>
    </el-row>
		<div id="ScenicRegion-search">
			<!-- 景点地区-分类展示 -->
			<div id="ScenicRegion-modular">
				<font size="6px">{{cityName}}</font><span><font size="6px" style="text-transform:Uppercase" color="red">·{{pinyin}}</font></span>
				<ul style="list-style: none;margin-top:30px;"  v-for="(classesInfo,index) in classesInfo" :key="index">
					<li height="50px">
              <img src="../../image/dest_online_jd.png" height="50px" style="vertical-align:middle;margin-right:3px;">
              <font size="4px" style="">{{classesInfo.name}}</font>
          </li>
				</ul>
			</div>
			<!-- 景点地区-轮播图展示 -->
			<div class="block" style="margin-top:100px;">
				<el-carousel trigger="click" height="550px" style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.8);border-radius: 8px">
					<el-carousel-item v-for="(msg1,index) in msg1" :key="index">
						<div class="block">
							<el-image :src="msg1.images"></el-image>
						</div>
					</el-carousel-item>
				</el-carousel>
			</div>
      <div id="lls">
        <ul style="list-style: none;margin-top:20px;"  v-for="(bichw,index) in bichw" :key="index" id="ul1">
          <li>{{bichw.name}}</li>
        </ul>
      </div>
      <!-- 景点地区-详情页面 -->
      <el-row style="margin-left:-85px">
        <el-col style="margin-left:85px;" :span="6" v-for="(o,index) in scenicList" :key="index">
            <div class="scenic_div" @click="scenicDetails(o.id)">                
                <div class="ScenicRegion-Details"  style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);margin-top:15px;border-radius: 8px">
                  <div class="block">
                      <img :src='`http://127.0.0.1:8082/getImageById?id=${o.imageId}`' class="image" style="width:100%;height:280px">
                  </div>
                  <div class="dong">
                      <h3 style="margin-left:15px;margin-top:10px;">{{o.scenicName}}</h3>
                      <p style="margin-left:15px;margin-top:5px;">{{o.briefIntroduction}}</p>
                  </div>
                </div>
            </div>
        </el-col>
      </el-row>
      <!-- 游记 -->
      <el-row>
        <div style="margin-top:50px">
          <span style="font-size:20px">推荐游记</span>
        </div>
        <el-col :span="8" v-for="(o, index) in travelNotesList" :key="index" class="ScenicExHiBitionCol">
          <el-card :body-style="{ padding: '0px' }"> 
            <img :src='`http://127.0.0.1:8082/getImageById?id=${o.coverId}`' class="ScenicExHiBitionImage">
            <div style="padding: 14px;"  @click="travelDitails(o.id)">
              <div class="bottom clearfix" >
                <span style="float:left;width:50%;margin-left:20px">
                  <el-link :underline="false" style="font-size:20px">{{o.title}}</el-link>
                </span>
                <span class="ScenicRegionView_authorSpan">
                  <el-avatar :src='`http://127.0.0.1:8082/getImageById?id=${o.avatarId}`' style="margin-top:10px"></el-avatar>
                  <font size="3 px" class="ScenicRegionView_authorFont">{{o.author}}</font>
                </span>
                <span style="float:left;width:60%;margin-top:70px;margin-left:20px">
                  <font size="2px">发布时间：{{o.createTime}}</font>
                  <font size="2px" class="el-icon-view" style="margin-left:40px">浏览量：{{o.views}}</font>
                </span>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <!-- 分页 -->
      <div class="block">
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-size="page.pageSize"
        layout="prev, pager, next, jumper"
        :total="page.total">
        </el-pagination>
      </div>
	  </div>
	</div>
</template>
<script>
const axios = require('axios')
export default {
  data () {
    return {
      // 分页对象
      page: {
        pageSize: 10,
        pageNum: 1,
        total: 0
      },
      id: '',
      scenicList: '',
      input: '',
      pinyin: '',
      // 城市名称
      cityName: '',
      // 游记集合
      travelNotesList: '',
      // 存放城市Id
      cityId: '',
      bichw: [
        {
          id: '1',
          name: '必玩'
        },
        {
          id: '2',
          name: '必吃'
        },
        {
          id: '3',
          name: '必逛'
        }
      ],
      classesInfo: [
        {
          id: '1',
          name: '景点'
        },
        {
          id: '2',
          name: '美食'
        },
        {
          id: '3',
          name: '住宿'
        },
        {
          id: '4',
          name: '购物'
        },
        {
          id: '1',
          name: '游记'
        },
        {
          id: '2',
          name: '当地向导'
        },
        {
          id: '3',
          name: '旅游度假'
        }
      ],
      msg1: [
        {
          id: 1,
          name: '上海海洋公园',
          images: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
        },
        {
          id: 2,
          name: '洒洒水啦啦啦',
          images: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
        },
        {
          id: 3,
          name: '上海海洋公园',
          images: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
        },
        {
          id: 4,
          name: '上海海洋公园',
          images: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
        },
        {
          id: 5,
          name: '上海海洋公园',
          images: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
        },
        {
          id: 6,
          name: '上海海洋公园',
          images: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
        }
      ]
    }
  },
  mounted () {
    this.getScenicAll()
    // 根据城市id全查游记信息
    this.getTourNoteAllByCityId()
  },
  methods: {
    // 点击某个游记跳转到游记详情界面
    travelDitails(id){
     this.$router.push({name:'TravelDitails', query:{id: id}})
    },
    // 根据城市id全查游记信息
    getTourNoteAllByCityId () {
      axios
        .get('http://127.0.0.1:8082/tourNote/getTourNoteAllByCityId?cityId=' + this.cityId, {
          params: {
            pageSize: this.page.pageSize,
            pageNum: this.page.pageNum,
          }
        })
        .then((res) => {
          this.travelNotesList = res.data.obj.content
          this.page.total = res.data.obj.total
        })
    },
    // 点击某个景区跳转到景区详情页面
    scenicDetails(id){
      this.$router.push({name:'ScenicspotDetailsView', query:{id: id}})
    },
    //  根据城市id获取景区数据
    getScenicAll () {
      this.cityId = this.$route.query.id
      this.cityName = this.$route.query.cityName
      this.pinyin = this.$route.query.pinyin
      this.$axios
        .get('http://127.0.0.1:8082/scenic/scenicAllByCirtId?cityId=' + this.cityId)
        .then((res) => {
          this.scenicList = res.data.obj
        })
    },
     // 用于分页
    handleSizeChange (ps) {
      this.page.pageSize = ps
      this.getTourNoteAllByCityId()
    },
    // 用于分页
    handleCurrentChange (pn) {
      this.page.pageNum = pn
      this.getTourNoteAllByCityId()
    },
  }
}
</script>
<style lang="less" scoped>
.scenic_div:hover{
  cursor:pointer;
}
.ScenicRegion{
  width: 1600px;
  margin: 0 auto;
}
#ScenicRegion-search{
  width: 1180px;
  margin: 0 auto;
}
#lls {
  margin-top: 3%;
  width: 1180px;
  height: 50px;
}
#ScenicRegion-modular ul li{
  float: left;
  margin-right: 10px;
}
#sousuo{
	height: 55px;
}
#ScenicRegion-modular{
	width: 1200px;
	margin: 0 auto;
	margin-top: 20px;
}
.ScenicRegion-Details{
  width:  380px;
  height: 370px;
}
 #ul1 li{
	float: left;
	margin-right: 10px;
}
.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
  }
  .el-carousel__item:nth-child(2n) {
     background-color: #99a9bf;
  }
  .el-carousel__item:nth-child(2n+1) {
     background-color: #d3dce6;
  }
.ScenicExHiBitionCol{
	width:100%;
	margin-top:40px	
}
.ScenicExHiBitionImage{
	float:left;
	width:400px;
	height:250px;
	border-radius: 6%;
}
.block{
	text-align: center;
}
.ScenicRegionView_authorFont{
  position: relative;
  top:-15px;
  left: 10px
}
.ScenicRegionView_authorSpan{
  float:left;
  width:60%;
  margin-top:60px;
  margin-left:20px;
}
</style>
